<template>
	<el-dialog width="99%" :close-on-click-modal="false" v-model="dialogVisible" :title="state.title" destroy-on-close :before-close="handleClose">
		<el-table height="50vh" :header-cell-style="{ color: '#000', background: '#F5F7FA' }" :data="state.infoData">
			<el-table-column label="公司主体" prop="companyName" min-width="160"></el-table-column>
			<el-table-column label="团队" prop="teamName" min-width="120"></el-table-column>
			<el-table-column label="仓库" prop="whName" min-width="120"></el-table-column>
			<el-table-column label="产品图片" prop="" min-width="100">
				<template v-slot="scope">
					<ewt-image :url="scope.row.picUrl" style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer" />
					<!-- <div v-else class="non-pic">无图</div> -->
				</template>
			</el-table-column>
			<el-table-column label="产品名称/SKU" prop="" min-width="160">
				<template v-slot="scope">
					<div>{{ scope.row.skuName || '--' }}</div>
					<div style="margin-top: 12px">{{ scope.row.skuCode || '--' }}</div>
				</template>
			</el-table-column>
			<el-table-column label="原库位" prop="positionCode" min-width="120"></el-table-column>
			<el-table-column label="当前仓库批次号" prop="batchCode" min-width="160"></el-table-column>
			<el-table-column label="可用量" prop="availableQty" min-width="120"></el-table-column>
			<el-table-column label="移入库位" prop="positionToCode" min-width="130">
				<template v-slot="scope">
					<el-cascader
						v-model="scope.row.currentPositionToCode"
						:options="scope.row.seatList"
						placeholder="请选择库位"
						filterable
						:props="{ value: 'value', label: 'value', children: 'children' }"
						:show-all-levels="false"
						@focus="getAvailablePositionObj(scope.row)"
						@change="changePositionTo(scope.row)"
					/>
				</template>
			</el-table-column>
			<el-table-column label="移入数量" prop="transferQty" min-width="120">
				<template v-slot="scope">
					<el-input
						v-model="scope.row.transferQty"
						placeholder="请输入数量"
						oninput="value=value.replace(/^\D*(\d{0,9}(?:)?).*$/g,'$1')"
						@blur="
							scope.row.transferQty = Number($event.target.value);
							judgeTransferQty(scope.row);
						"
					></el-input>
				</template>
			</el-table-column>
		</el-table>

		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button class="ml10" type="primary" @click="saveTransferPositionDtail">完成转移</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="ts" name="seatTransferDialog">
import { saveTransferPosition, getAvailablePosition } from '/@/api/inventory/index';
import { ElMessage } from 'element-plus';
const emit = defineEmits(['toRefresh']);
const props = defineProps({
	seatTransferList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const state = reactive({
	title: '库位转移',
	infoData: [],
});
const dialogVisible = ref(false);

// 打开弹窗
const openDialog = () => {
	dialogVisible.value = true;
	state.infoData = JSON.parse(JSON.stringify(props.seatTransferList));
};
const changePositionTo = (row) => {
	if ((row.currentPositionToCode.length = 2)) {
		row.seatList.forEach((item) => {
			if (item.value === row.currentPositionToCode[0]) {
				item.children.forEach((it) => {
					if (it.value === row.currentPositionToCode[1]) {
						row.positionToCode = it.value;
						// row.positionToId = it.value;
					}
				});
			}
		});
	}
};
// 获取库区库位级联数据
const getAvailablePositionObj = (row) => {
	let list = [];
	getAvailablePosition(row).then((res) => {
		res.data.forEach((item) => {
			let obj = {
				value: item.areaCode,
				children: [],
			};
			item.positionToCodes.forEach((it) => {
				let childItem = {
					value: it,
				};
				obj.children.push(childItem);
			});
			list.push(obj);
		});
		row.seatList = list;
	});
};
// 关闭弹窗
const handleClose = () => {
	dialogVisible.value = false;
	state.infoData = [];
};
const judgeTransferQty = (row) => {
	if (Number(row.availableQty) < Number(row.transferQty)) {
		ElMessage({
			message: '移入数量要小于等于可用量',
			type: 'error',
		});
		row.transferQty = 0;
	}
};
// 校验
const saveTransferPositionDtail = () => {
	let errorList1 = [];
	let errorList2 = [];
	let errorList3 = [];
	state.infoData.forEach((item) => {
		if (!item.positionToCode || (item.transferQty !== 0 && !item.transferQty)) {
			errorList1.push(item);
		}
		if (Number(item.transferQty) === 0) {
			errorList2.push(item);
		}
		if (Number(item.availableQty) < Number(item.transferQty)) {
			errorList3.push(item);
		}
	});
	if (errorList1.length > 0) {
		ElMessage({
			message: '数据未填写完整',
			type: 'error',
		});
		return false;
	}
	if (errorList2.length > 0) {
		ElMessage({
			message: '移入数量不能为0',
			type: 'error',
		});
		return false;
	}
	if (errorList3.length > 0) {
		ElMessage({
			message: '移入数量要小于等于可用量',
			type: 'error',
		});
		return false;
	}
	if (errorList1.length === 0 && errorList2.length === 0 && errorList3.length === 0) {
		toSave();
	}
};
// 保存
const toSave = () => {
	saveTransferPosition(state.infoData)
		.then((res) => {
			ElMessage({
				message: res.msg || '库位转移成功',
				type: 'success',
			});
			handleClose();
			emit('toRefresh');
		})
		.catch((res) => {
			ElMessage({
				message: res.error,
				type: 'error',
			});
		});
};
defineExpose({
	openDialog,
});
</script>
<style scoped>
.non-pic {
	background: rgba(11, 16, 25, 0.05);
	border: 1px solid rgba(0, 0, 0, 0.03);
	color: rgba(11, 16, 25, 0.12);
	border-radius: 2px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 36px;
	height: 36px;
	line-height: 36px !important;
	text-align: center;
}
</style>
